<template>
  <div>
    <div id="app">
      <div  style="">
        <div   class="backBtn" @click="jumpIndex()">
          <i  class="icon iconfont icon-back"></i>
        </div>
        <div   class="mainWrap bottom">
          <div   class="headContainer">
            <div   class="headImg">
              <img :src="datainfo.logo" lazy="loaded">
            </div>
          </div>
          <div   class="title">
            {{datainfo.name}}
          </div>
          <div   class="section">
            <div   class="section-head">
              快乐尊享
            </div>
            <div   class="section-content activity">
              <div   class="activityBox">
                <span v-if="memberPrice[2]"><label   class="activityIcon red">折</label><i >普通会员{{memberPrice[2].discount*100}}折</i></span>
                <span v-else><label   class="activityIcon red">折</label><i >普通会员1折</i></span>
                <span v-if="memberPrice[1]"><label   class="activityIcon red">折</label><i>vip会员{{memberPrice[1].discount*100}}折</i></span>
                <span v-else><label   class="activityIcon red">折</label><i>vip会员1折</i></span>
                <!-- <span  v-if="memberPrice[0]"><label   class="activityIcon blue">折</label><i  >智慧经理{{memberPrice[0].discount*100}}折</i></span> -->
              </div>
            </div>
          </div>
          <div   class="section">
            <div   class="section-head">
              商家实景
            </div>
            <div   class="section-content shopImgList">
              <ul  >
                <li  v-for="(vo,index) in bannerList" :key="index"><img   alt="" :src="vo.picUrl" lazy="loaded"><span  >{{vo.picName}}</span></li>
              </ul>
            </div>
          </div>
          <div   class="section">
            <div   class="section-head">
              商家信息
            </div>
            <div   class="section-content info">
              <ul  >
                <li  ><label  >商家简介</label><span  v-html="datainfo.introduce"></span></li>
                <li  ><label  >商家电话</label><span  ><a   :href="datainfo.tel">
                  {{datainfo.tel}}
                <i   class="icon iconfont icon-arrow-right"></i></a></span></li>
                <li  class="address" @click="jumpLocation()"><label  >地址</label><span  >{{datainfo.provinceName}}{{datainfo.cityName}}{{datainfo.townName}}{{datainfo.address}}</span><i   class="icon iconfont icon-location"></i></li>
                <li  ><label  >营业时间</label><span  >{{datainfo.bussinessTime}}</span></li>
              </ul>
            </div>
          </div>
        </div>
        <div  class="payBtnCont" @click="goOrderFn">
          <div  class="radioBtn">
            <img  src="/static/img/logo_btn.png">
          我要买单
          </div>
        </div>
        <!---->
      </div>
    </div>
  </div>
</template>

<script>
import { BannerListUrl, TraderListUrl,TraderDetailUrl } from "@/api/axiosFun";
import { ConfigJs } from "@/api/login";

export default {
  name: "Index",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
	  bannerList: [],
	  page:1,
	pageSize:100,
	traderType:"",
	cityId:"",
	orderNum:false,
	Latitude:"",
  Longitude:"",
  datainfo:{},
  memberPrice:{},
  oid:""
    };
  },
  created(){
    this.getConfig()
  },
  mounted() {
    this.oid = this.$route.params && this.$route.params.id;
    console.log(this.$route.params);
    this.init();
  },
  methods: {
    init() {
      TraderDetailUrl({
        id:this.oid
      }).then(res => {
        console.log(res);
        if (res.errCode == 0) {
          this.datainfo = res.data.detail;
          this.bannerList = res.data.pics;
          this.memberPrice = res.data.memberPrice;
        }
      });
    },
    getConfig(){
      ConfigJs(window.location.href).then((res)=>{
          console.log(res);
        let data=res.data.data
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId:'wx9b4743a1848616d3', // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名
            jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表
        });
      })
    },
    jumpIndex(){
      this.$router.replace('/index')
    },
    //导航
    jumpLocation(){
      wx.openLocation({
          latitude: this.datainfo.lat, // 纬度，浮点数，范围为90 ~ -90
          longitude: this.datainfo.lng, // 经度，浮点数，范围为180 ~ -180。
          name: this.datainfo.address, // 位置名
          address: this.datainfo.provinceName+this.datainfo.cityName+this.datainfo.townName+this.datainfo.address, // 地址详情说明
          scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
      });
    },
    //我要买单
    goOrderFn(){
      if(window.localStorage.getItem("token")){
        this.$router.replace({ name: "chosepay", params: { id: this.datainfo,price:this.memberPrice } });
      } else {
        this.$router.replace({ name: "author"});
      }
        
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, input, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: 400;
    vertical-align: baseline;
}
.backBtn {
    width: 1.25rem;
    height: 1.25rem;
    background: -webkit-gradient(linear,left top,right top,from(rgba(0,170,255,.5)),to(rgba(0,133,255,.5)));
    background: linear-gradient(90deg,rgba(0,170,255,.5),rgba(0,133,255,.5));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    position: fixed;
    top: .44rem;
    left: .44rem;
    z-index: 9999;
    border-radius: 50%;
    overflow: hidden;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.backBtn i {
    font-size: .64rem;
    font-weight: 700;
    color: #fff;
}
.address{
  display: flex;
  margin-right: .54rem;
}
.icon-location{
  color: blue;
}
.mainWrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
}
.mainWrap.bottom {
    bottom: 1.42rem;
}
.headContainer {
    position: relative;
    width: 100%;
    margin-bottom: .3rem;
}
.headImg {
    width: 100%;
    overflow: hidden;
}
.headImg img {
    width: 100%;
}
.title {
    height: .88rem;
    line-height: .88rem;
    font-size: .55rem;
    color: #333;
    text-align: center;
    font-weight: 700;
}
.section {
    padding: .4rem 0;
    border-bottom: .3rem solid #f5f5f5;
    position: relative;
}
.section-head {
    font-size: .41rem;
    color: #000;
    font-weight: 700;
    padding: .14rem .44rem;
}
.section-content.activity, .section-content.shopImgList {
    padding: 0 .44rem;
}
.activityBox {
    height: .75rem;
    line-height: .75rem;
}
.activityBox span {
    display: inline-block;
    padding-left: .2rem;
    color: #333;
    font-size: .33rem;
}
.activityBox .activityIcon {
    display: inline-block;
    background-color: #f07373;
    border-radius: 3px;
    height: .44rem;
    line-height: .48rem;
    padding: .05rem .1rem;
    font-size: .3rem;
    color: #fff;
    text-align: center;
}
.activityBox .activityIcon.red {
    background-color: #f07373;
}
.activityBox i {
    font-style: normal;
    margin-left:.1rem;
}
.section {
    padding: .4rem 0;
    border-bottom: .3rem solid #f5f5f5;
    position: relative;
}
.section-head {
    font-size: .41rem;
    color: #000;
    font-weight: 700;
    padding: .14rem .44rem;
}
.section-content.activity, .section-content.shopImgList {
    padding: 0 .44rem;
}
.section-content.shopImgList {
    overflow: hidden;
}
.section-content.shopImgList li {
    width: 3.1rem;
    height: 2.92rem;
    margin: .2rem .2rem .2rem 0;
    position: relative;
    overflow: hidden;
    float: left;
}
.section-content.shopImgList li img {
    width: 100%;
}
.section-content.shopImgList li span {
    display: block;
    width: 100%;
    height: .52rem;
    line-height: .52rem;
    text-align: center;
    color: #fff;
    font-size: .33rem;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    bottom: 0;
}
.section-head {
    font-size: .41rem;
    color: #000;
    font-weight: 700;
    padding: .14rem .44rem;
}
.section-content.info {
    padding-left: .44rem;
}
.payBtnCont {
    position: fixed;
    right: 1.5rem;
    bottom: .2rem;
    left: 1.5rem;
    height: 1.42rem;
    line-height: 1.42rem;
    color: #fff;
    background-color: #f29224;
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
}
.payBtnCont .radioBtn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .42rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: 700;
    letter-spacing: 2px;
}
.payBtnCont .radioBtn img {
    width: .8rem;
    padding-right: .3rem;
}
.mint-popup {
    position: fixed;
    background: #fff;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: .2s ease-out;
    transition: .2s ease-out;
}
.discountWrapper {
    font-size: .42rem;
    width: 86%;
    border-radius: 5px;
    overflow: hidden;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.discountWrapper table {
    width: 100%;
}
.discountWrapper td, .discountWrapper th {
    text-align: center;
    padding: .3rem;
}
.discountWrapper th {
    background-color: #f07373;
    color: #fff;
}
.section-content.info li {
    padding: .4rem 0;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
}
.section-content.info li label, .section-content.info li span {
    display: block;
}
.section-content.info li label {
    width: 20%;
    font-size: .35rem;
    color: #333;
    font-weight: 700;
    float: left;
}
.section-content.info li label, .section-content.info li span {
    display: block;
}
.section-content.info li span {
    width: 75%;
    font-size: .33rem;
    color: #666;
    padding-right: .44rem;
    text-align: right;
    float: right;
}
</style>
